<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .active {
            font-size: 50px;
        }

        .color {
            color: green;
        }
    </style>
</head>

<body>
    <!-- 样式绑定相关语法细节:
        1.对象绑定和数组绑定可以结合使用
        2.class绑定的值可以简化操作
        3.默认的class如何处理? 默认的class会保留
     -->
    <div id='app'>
        <!-- 使用数组方式表示[k] k不加引号表示的是变量 'k'加引号表示的是类名 -->
        <div :class="[active,color]">艰难苦恨,潦倒新亭</div>
        <div :class="['active','color','box']">艰难苦恨,潦倒新亭</div>
        <button @click="active='',color=''">按钮</button>
        <hr>
        <!-- 对象绑定和数组绑定可以结合使用 -->
        <p :class="[{active:true},'color']">无边落木萧萧下,不尽长江滚滚来</p>
        <p class="box" :class="[obj,'color']">无边落木萧萧下,不尽长江滚滚来</p>
    </div>
    <script src='js/vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                active: 'color',
                color: 'active',
                obj: { active: true }
            },
            methods: {},
        })
    </script>
</body>

</html>